define(function(require, exports, module) {
    "use strict";
    var $ = require("$");
    require("rotate");
    var page_tmp = require("./template/page.html");
    exports.init = function(form) {
        $("body").append(page_tmp);
        $(document).on('click', ".alert_big_imgs", function() {
            var src = $(this).children('.alert_big_img').attr('data-src');
            var image = new Image();
            var cc_bl;
            var rot = 0;
            image.src = src;
            $(".js_alert_img_rotate .images .img").rotate(rot);
            $('.js_alert_img_rotate .images img').css({
                'left': 0,
                'top': 0,
                'width': '100%',
                'height': 'auto'
            });
            image.onload = function() {
                cc_bl = image.width / image.height;
                $('.js_alert_img_rotate').fadeIn();
                $('.js_alert_img_rotate .images').css({
                    'maxWidth': image.width,
                    'maxHeight': image.height
                });
                $('.js_alert_img_rotate .images img').attr('src', src);
                $('.cayt').attr('href', src);
                resize();
                $(window).on('resize', resize);

            }

            $('.fr-close').on('click', function() {
                $(window).off('resize', resize);
                $('.xz').off('click');
                $('.js_alert_img_rotate').fadeOut();
            });

            $('.xz',$(".js_alert_img_rotate")).on('click', function() {
                rot += 90;
                rot %= 360;
                $(".js_alert_img_rotate .images .img").rotate(rot);
                var r2b = image.width;
                image.width = image.height;
                image.height = r2b;
                cc_bl = image.width / image.height;
                resize();
                if (rot % 180 == 0) {
                    $('.js_alert_img_rotate .images img').css({
                        'left': 0,
                        'top': 0,
                        'width': '100%',
                        'height': 'auto'
                    });
                } else {
                    var w = $('.js_alert_img_rotate .images').width();
                    var h = $('.js_alert_img_rotate .images').height();
                    var left = (h - w) / 2
                    $('.js_alert_img_rotate .images img').css({
                        'left': -left,
                        'top': left,
                        'width': h,
                        'height': w
                    });
                }
            });

            function resize() {
                var _width = $(window).width();
                var _height = $(window).height();
                var _bl = _width / _height;

                var h = 0.9 * _height;
                if (h > image.height) h = image.height;
                var top = (_height - h) / 2;
                var w = h * cc_bl;
                var left = (_width - w) / 2;
                if (_bl > cc_bl) {
                    
                    $('.js_alert_img_rotate .images').css({
                        'height': h,
                        'top': top,
                        'width': w,
                        'left': left
                    });
                } else if(_width < image.width){
                     $('.js_alert_img_rotate .images').css({
                        'height': 'auto',
                        'width': '90%',
                        'top':top,
                        'left':'5%'
                    });
                }
                else{
                    $('.js_alert_img_rotate .images').css({
                        'height': 'auto',
                        'width': '90%',
                        'top':top,
                        'left':left
                    });
                }
            }
        });
    }

})